<template>
  <div id="CesiumContainer" ref="CesiumContainer"></div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import * as Cesium from 'cesium';

  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZmU5NTMwMS0xNDQ3LTRjODUtOTU4YS04NzVlNTdkODBhYWIiLCJpZCI6MjM3NTY3LCJpYXQiOjE3MjQ4Mzc2NjZ9.MORLe07Q4vKs2ZDO9pXxX-1MxoyLgKraBWwlNb7hi0s";

  let cesium = {
    viewer: null,
  };

  const initCesium = () => {
    cesium.viewer = new Cesium.Viewer("CesiumContainer", {
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url:
          'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
      }),
      // useDefaultRenderLoop: false,
      homeButton: false, // home按钮
      sceneModePicker: false, // 选择3d/2d
      baseLayerPicker: false, // 影像切换
      animation: false, // 是否显示动画控件 左下角仪表
      infoBox: false, // 是否显示点击要素之后显示的信息
      selectionIndicator: false, // 要素选中框
      geocoder: false, // 是否显示地名查找控件
      timeline: false, // 是否显示时间线控件
      fullscreenButton: false, // 全屏按钮
      shouldAnimate: false, // 是否开启动画
      navigationHelpButton: false, // 是否显示帮助信息控件
      animate: false,
      timeline: false,
      navigationInstructionsInitiallyVisible: false,
      allowTextureFilterAnisotropic: false,
      targetFrameRate: 60,
      resolutionScale: 0.1,
      orderIndependentTranslucency: true,
      automaticallyTrackDataSourceClocks: false,
      dataSources: null,
      clock: null,
      terrainShadows: Cesium.ShadowMode.DISABLED,
      terrainProvider: new Cesium.createWorldTerrain({
        requestWaterMask: false,
        requestVertexNormals: false,
        willReadFrequently: true,
      }),
    })
    // 隐藏版权信息
    cesium.viewer._cesiumWidget._creditContainer.style.display = "none";
     // 禁用双击
    cesium.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
    //隐藏太阳
    cesium.viewer.scene.globe.enableLighting = false;
    cesium.viewer.shadows = false;
    cesium.viewer.scene.sun.show = false; //还可以 cesium.viewer.scene.sun.destroy();
    //月亮
    cesium.viewer.scene.moon.show = false;
    //大气
    // cesium.viewer.scene.skyAtmosphere.show = false;
    //雾
    // cesium.viewer.scene.fog.enable = false;

    cesium.viewer.scene.fxaa = false;
    cesium.viewer.scene.globe.maximumScreenSpaceError = 4/3;

    window.cesiumViewer = cesium.viewer
  }

  onMounted(() => {
    initCesium()
  })
</script>

<style scoped lang='scss'>
  #CesiumContainer {
    width: 100%;
    height: 100%;
  }
</style>
